<template>
  <div class="page">
    <h2>每日一笑</h2>
    <p v-if="loading">加载中...</p>
    <p v-else>{{ joke }}</p>
    <button @click="fetchJoke">换一个</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const joke = ref('')
const loading = ref(true)

async function fetchJoke() {
  loading.value = true
  try {
    const res = await fetch('https://www.mxnzp.com/api/jokes/list/random?app_id=mrfjmtn2heawpjif&app_secret=wctcTdWBenOALNujImfp9F1rZZkTPOXF')
    const data = await res.json()
    if (data.code === 1 && data.data && data.data.length > 0) {
      joke.value = data.data[0].content || '获取失败，请重试'
    } else {
      joke.value = data.msg || '获取失败，请重试'
    }
  } catch (e) {
    joke.value = '获取失败，请检查网络'
  } finally {
    loading.value = false
  }
}

onMounted(fetchJoke)
</script>

<style scoped>
.page {
  text-align: center;
  margin-top: 60px;
}
button {
  margin-top: 20px;
  padding: 8px 24px;
  background: #42b983;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
button:hover {
  background: #369870;
}
</style> 